<template>
  <div class="hello">
    <dv-full-screen-container>
      <dv-loading v-if="showLoading">Loading...</dv-loading>
      <div class="banner">
        <dv-decoration-8 :reverse="true" style="width:40%;height:80px;"/>
        <dv-decoration-11 style="width:20%;height:80px;">大屏幕数据展示demo</dv-decoration-11>
        <dv-decoration-8 :reverse="false" style="width:40%;height:80px;"/>
      </div>
      <div class="all">
        <div class="left">
          <div class="partA">
            <dv-border-box-13>
              <div class="line-top">动态环图</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <dv-active-ring-chart :config="rineConfig" style="width: 100%;height: 100%; margin: 0 auto"/>
            </dv-border-box-13>
          </div>
          <div class="partA">
            <dv-border-box-13>
              <div class="line-top">锥形柱图</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <dv-conical-column-chart :config="picConfig"  style="width: 94%;height:70%;  margin: 7% auto" />
            </dv-border-box-13>
          </div>
          <div class="partA">
            <dv-border-box-13>
              <div class="line-top">班级排名</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <dv-scroll-board :config="otherConfig"  style="width: 94%;height:70%;  margin: 7% auto" />
            </dv-border-box-13>
          </div>
        </div>
        <div class="middle">
          <div class="partB">
            <dv-border-box-8>
              <div class="map-show">京津冀产能分布</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <dv-flyline-chart-enhanced :config="mapShow" style="width: 98%;height:90%;  margin: 0 auto"/>
            </dv-border-box-8>
          </div>
          <div class="partA">
            <dv-border-box-13>
              <div class="map-show">图表</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <dv-charts :option="tableOption"  style="width: 98%;height:90%;  margin: 0 auto"/>
            </dv-border-box-13>
          </div>
        </div>
        <div class="right">
          <div class="partA">
            <dv-border-box-13>
              <div class="line-top">水位图</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <dv-water-level-pond :config="waterConfig" style="width:90%;height:80%; margin: 0 auto"/>
            </dv-border-box-13>
          </div>
          <div class="partA">
            <dv-border-box-13>
              <div class="line-top">胶囊柱图</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <div id="test-container">
                <dv-capsule-chart :config="lineConfig" style="width:80%;height:80%; margin: 0 auto"/>
              </div>
            </dv-border-box-13>
          </div>
          <div class="partA">
            <dv-border-box-13>
              <div class="line-top">折线图</div>
              <div class="map-be">
                <dv-decoration-1 :reverse="true" style="width:200px;height:50px;"/>
                <dv-decoration-1 :reverse="false" style="width:200px;height:50px;"/>
              </div>
              <e-charts
                class="chart"
                :option="chartConfig"
              />
            </dv-border-box-13>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import axios from 'axios'
import {getJson} from '@/api/index'

export default {
  name: 'HelloWorld',
  data () {
    return {
      showLoading: true,
      lineConfig: {},
      rineConfig: {},
      waterConfig: {},
      mapShow: {
        points: [
          {
            name: '郑州',
            coordinate: [0.48, 0.35],
            halo: {
              show: true
            },
            icon: {
              src: '../static/mapCenterPoint.png',
              width: 30,
              height: 30
            },
            text: {
              show: false
            }
          },
          {
            name: '新乡',
            coordinate: [0.52, 0.23]
          },
          {
            name: '焦作',
            coordinate: [0.43, 0.29]
          },
          {
            name: '开封',
            coordinate: [0.59, 0.35]
          },
          {
            name: '许昌',
            coordinate: [0.53, 0.47]
          },
          {
            name: '平顶山',
            coordinate: [0.45, 0.54]
          },
          {
            name: '洛阳',
            coordinate: [0.36, 0.38]
          },
          {
            name: '周口',
            coordinate: [0.62, 0.55],
            halo: {
              show: true,
              color: '#8378ea'
            }
          },
          {
            name: '漯河',
            coordinate: [0.56, 0.56]
          },
          {
            name: '南阳',
            coordinate: [0.37, 0.66],
            halo: {
              show: true,
              color: '#37a2da'
            }
          },
          {
            name: '信阳',
            coordinate: [0.55, 0.81]
          },
          {
            name: '驻马店',
            coordinate: [0.55, 0.67]
          },
          {
            name: '济源',
            coordinate: [0.37, 0.29]
          },
          {
            name: '三门峡',
            coordinate: [0.20, 0.36]
          },
          {
            name: '商丘',
            coordinate: [0.76, 0.41]
          },
          {
            name: '鹤壁',
            coordinate: [0.59, 0.18]
          },
          {
            name: '濮阳',
            coordinate: [0.68, 0.17]
          },
          {
            name: '安阳',
            coordinate: [0.59, 0.10]
          }
        ],
        lines: [
          {
            source: '新乡',
            target: '郑州'
          },
          {
            source: '焦作',
            target: '郑州'
          },
          {
            source: '开封',
            target: '郑州'
          },
          {
            source: '周口',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '南阳',
            target: '郑州',
            color: '#fb7293',
            width: 2
          },
          {
            source: '济源',
            target: '郑州'
          },
          {
            source: '三门峡',
            target: '郑州'
          },
          {
            source: '商丘',
            target: '郑州'
          },
          {
            source: '鹤壁',
            target: '郑州'
          },
          {
            source: '濮阳',
            target: '郑州'
          },
          {
            source: '安阳',
            target: '郑州'
          },
          {
            source: '许昌',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '平顶山',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '洛阳',
            target: '南阳',
            color: '#37a2da'
          },
          {
            source: '驻马店',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '信阳',
            target: '周口',
            color: '#8378ea'
          },
          {
            source: '漯河',
            target: '周口',
            color: '#8378ea'
          }
        ],
        icon: {
          show: true,
          src: '../static/mapPoint.png'
        },
        text: {
          show: true
        },
        k: 0.5,
        bgImgSrc: '../static/map.jpg'
      },
      picConfig: {},
      tableOption: {},
      otherConfig: {},
      chartConfig: {
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: []
      }
    }
  },
  methods: {
    showLoadings () {
      const that = this
      setTimeout(function () {
        that.showLoading = false
      }, 5000)
    },
    get () {
      getJson().then(res => {
        this.show = false
        this.lessonCategory = res.data.data.list
        this.Subject = res.data.data.subjectList
      }).catch(error => {
        // 处理请求失败的情况
        console.log('请求失败', error)
      })
    },
    getJsons () {
      axios.get('../../../static/json/data.json')
        .then(response => {
          // 处理请求成功的数据
          console.log('请求成功', response.data.data)
          // 动态环图
          this.rineConfig = response.data.data.rineConfig
          // 锥形柱图
          this.picConfig = response.data.data.picConfig
          // 班级排名
          this.otherConfig = response.data.data.otherConfig
          // 图表
          this.tableOption = response.data.data.tableOption
          // 胶囊柱图
          this.lineConfig = response.data.data.total
          // 水位图
          this.waterConfig = response.data.data.waterConfig
          // 排名轮播表
          this.chartConfig.series = response.data.data.chartConfig.series
          this.chartConfig.xAxis.data = response.data.data.chartConfig.xAxis.data
        })
        .catch(error => {
          // 处理请求失败的情况
          console.log('请求失败', error)
        })
    }
  },
  beforeMount () {
    this.showLoadings()
  },
  mounted () {
    this.$nextTick(() => {
      this.getJsons()
      this.get()
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.banner {
  box-sizing: border-box;
  display: flex;
  height: 100px;
  padding: 10px 0;
}

.dv-decoration-11 .decoration-content {
  font-size: 32px;
  color: #ffffff;
}

.all {
  display: flex;
  width: 100%;
  height: calc(100% - 100px);
}

.left {
  width: 30%;
  height: 100%;
}

.middle {
  width: 40%;
  height: 100%;
}

.right {
  width: 30%;
  height: 100%;
}

.partA {
  height: 33.333%;
}

.partB {
  height: 66.666%;
}

.map-show {
  padding: 20px 10px;
  color: #ffffff;
  font-size: 24px;
}

.map-be {
  display: flex;
  justify-content: space-between;
  height: 50px;
  margin: -60px 0 0 0;
}

#test-container {
  width: 100%;
  height: 100%;
}

.line-top {
  height: 40px;
  padding: 10px 5px;
  font-size: 26px;
  color: #ffffff;
}
.chart{
  height: 90%;
}
</style>
